import React, { Component } from 'react';
import { toJS } from 'mobx';
import equals from 'deep-equal';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Icon, Popover, ActivityIndicator, Result, Tools } from 'weaver-mobile';
import { ListAdvanced, RouteLayout, Reply } from 'weaver-mobile-page';
import CustomerCard from '../card/Customer';
import ContactRemarkItemsStore from '../../stores/list/ContactRemarkItemsStore';
import ContactRemarkItem from './ContactRemarkItem'
const Item = Popover.Item;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class ContactRemarkItems extends Component {
    constructor(props) {
        super(props);
        this.state = {
            store: new ContactRemarkItemsStore(),
        };
    }
    componentWillMount() {
        const { store } = this.state;
        const { doNew } = store;
        doNew(this)
    }
    componentDidMount() {
        const { onRef } = this.props;
        onRef && onRef(this)
    }
    render() {
        const { remarks } = this.state.store;
        const { onReplyClick } = this.props;
        let items = [];
        toJS(remarks).map((item, index) => {
            items.push(< ContactRemarkItem data={item} key={index} onReplyClick={(e) => { onReplyClick(e, this.state.store) }} />);
        })
        return (
            <div style={{ backgroundColor: "#f8f8f8" }}>
                {items}
            </div>
        )
    }
}